<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<title>SL商城--会员列表</title>
<meta charset='utf-8'>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- 引入 Bootstrap -->
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet">

<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
</head>

<style>
#editPage {
	z-index: 1000;
	width: 650px;
	height: 799px;
	position: absolute;
	box-shadow: 0 0px 10px black;
	display: none;
}
</style>

<body>


	<div style="padding: 50px 0px; width: 670px; margin: 0px auto;">

		<div class="btn-group">
			<button onclick="Update_()" type="button" class="btn btn-primary">
				<span class="glyphicon glyphicon-edit"
					style="text-shadow: rgb(0, 0, 0) 1px 2px 3px;">修改 </span>
			</button>
			<button onclick="Del_()" type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-trash"
					style="text-shadow: rgb(0, 0, 0) 1px 2px 3px;">删除 </span>
			</button>

		</div>
		<div id="search" class="pull-right">
			<form class="form form-inline" action="#">
				<div class="input-group">
					<input class="form-control " type="text" name="keyword"
						id="keyword" value="${sessionScope.userkeyword }"
						placeholder="请输入关键字"> <span class="input-group-btn">
						<input class="btn btn-primary" type="submit"
						value="&ensp; 查  询 &ensp;">
					</span>
				</div>
			</form>
		</div>

		<hr />
		<table id="sl" class="table table-bordered table-hover">
			<thead class="text-center">
				<tr class="info">
					<th class="text-center">选择</th>
					<th class="text-center">用户名</th>
					<th class="text-center">真实姓名</th>
					<th class="text-center">联系电话</th>
					<th class="text-center">推荐人</th>
					<th class="text-center">注册时间</th>
				<tr>
			</thead>

			<tbody class="text-center">
				<c:forEach items="${ulist }" var="u">
					<tr>
						<td><input type="radio" name="choice" value="${u.uid}"></td>
						<td>${u.userid }</td>
						<td>${u.realname }</td>
						<td>${u.phone }</td>
						<td>${u.referrer }</td>
						<td>2017-11-11</td>
						<%--<fmt:formatDate value="${u.registTime }" pattern="yyyy-MM-dd HH:mm:ss"/> --%>
					</tr>
				</c:forEach>
			</tbody>

		</table>

		<c:if test="${p.totalCount>1 }">
			<div id="page" align="center">
				<ul class="pagination">
					<li <c:if test="${p.currentPage==1 }">class="disabled"</c:if> ><a href="${pageContext.request.contextPath}/user_list.do?pageNo=1" title="首页"> &lt;&lt;</a></li>
					<li <c:if test="${p.currentPage==1 }">class="disabled"</c:if> ><a href="${pageContext.request.contextPath}/user_list.do?pageNo=${p.currentPage-1}" title="上一页">&lt;</a></li>
					<c:forEach
						begin="${ p.totalCount > 10 ? ( p.currentPage>5?p.currentPage-4:1 ):1 }"
						end="${p.totalCount<10?p.totalCount:( ((p.currentPage>5?p.currentPage-4:1)+9)  >  p.totalCount ? p.totalCount : ( ( p.totalCount > 10 ? ( p.currentPage>5?p.currentPage-4:1 ):1 )+9 ) ) }"
						varStatus="status">
						<c:if test="${p.currentPage==status.index}">
							<li class="active"><span class="current">${p.currentPage }</span></li>
						</c:if>
						<c:if test="${p.currentPage!=status.index}">
							<li><a
								href="${pageContext.request.contextPath}/user_list.do?pageNo=${status.index}">${status.index }</a></li>
						</c:if>
					</c:forEach>
					<li <c:if test="${p.currentPage==p.totalCount }">class="disabled"</c:if>><a href="${pageContext.request.contextPath}/user_list.do?pageNo=${p.currentPage+1}" title="下一页"> &gt; </a></li>
					<li <c:if test="${p.currentPage==p.totalCount }">class="disabled"</c:if>><a href="${pageContext.request.contextPath}/user_list.do?pageNo=${p.totalCount}" title="尾页"> &gt;&gt; </a></li>
				</ul>
			</div>
		</c:if>

	</div>

	<div id="editPage">
		<div class="panel panel-default">
			<div id="move" class="panel-heading">
				Edit
				<button type="button" class="close" onclick="CloseEdit()">
					&times;</button>
			</div>

			<div style="overflow: auto; height: auto;" class="panel-body">
				<form onsubmit="return CheckInput()" action="#"
					class="form form-horizontal" id="edit">
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="role">角色:</label>
							<div class="col-xs-8">
								<p class="form-control-static">会员</p>
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="utype">会员类型:</label>
							<div class="col-xs-8">
								<p class="form-control-static">注册会员</p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="uname">用户名:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="uname" value="" />
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="urealname">姓名:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="urealname">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="cardtype">证件类型:</label>
							<div class="col-xs-8">
								<select name="cardtype" class="form-control">
									<option value="-1">--请选择--</option>
									<option value="1">二代身份证</option>
									<option value="2">护照</option>
									<option value="3">军官照</option>
								</select>
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="idcard">证件号码:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="idcard">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="country">收货国家:</label>
							<div class="col-xs-8">
								<select name="country" class="form-control">
									<option value="-1">--请选择--</option>
									<option value="1">中国</option>
									<option value="2">美国</option>
								</select>
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="phone">移动电话:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="phone">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="email">电子邮件:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="email" value="" />
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="postnum">邮政编码:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="postnum">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="sex">性别:</label>
							<div class="col-xs-8">
								<select name="sex" class="form-control">
									<option value="-1">--请选择--</option>
									<option value="1">中国</option>
									<option value="2">美国</option>
								</select>
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="addrphone">联系电话:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="addrphone">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-12">
							<label class="col-xs-2 control-label" for="address">收货地址:</label>
							<div class="col-xs-10">
								<textarea
									style="min-width: 500px; min-height: 100px; max-height: 100px; max-width: 500px;"
									name="address" class="form-control" rows="4">dd</textarea>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="bankaddr">开户行:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="bankaddr" value="" />
							</div>
						</div>
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="banknum">开户卡号:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="banknum">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-6">
							<label class="col-xs-4 control-label" for="bankuser">开户人:</label>
							<div class="col-xs-8">
								<input class="form-control" type="text" name="bankuser" value="" />
							</div>
						</div>
					</div>

					<div class="row">
						<div class="form-group col-xs-12">
							<label class="col-xs-4 control-label" for="cardphoto0">上传身份证图片(正面):</label>
							<div class="col-xs-4 form-group">
								<input type="file" name="cardphoto0" />
							</div>
							<div class="col-xs-4">
								<img src="#" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-12">
							<label class="col-xs-4 control-label" for="cardphoto1">上传身份证图片(反面):</label>
							<div class="col-xs-4 form-group">
								<input type="file" name="cardphoto1" />
							</div>
							<div class="col-xs-4">
								<img src="#" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-xs-12">
							<label class="col-xs-4 control-label" for="bankphoto">上传银行卡图片(正面):</label>
							<div class="col-xs-4 form-group">
								<input type="file" name="bankphoto" />
							</div>
							<div class="col-xs-4">
								<img src="#" />
							</div>
						</div>
					</div>

					<div id='caption' class="pull-left"
						style="padding: 10px 0px 0px 17px;">
						<font size="+0" color="red"> 用户名不是唯一 </font>
					</div>

					<div class="form-group pull-right">
						<div class="btn-group" style="padding-right: 15px;">
							<button class="btn btn-default" type="submit">
								<span class="glyphicon glyphicon-check"
									style="text-shadow: #ccc 1px 2px 3px;">保存 </span>
							</button>
							<button class="btn btn-default" type="button"
								onclick="CloseEdit()">
								<span class="glyphicon glyphicon-check"
									style="text-shadow: #ccc 1px 2px 3px;">关闭 </span>
							</button>
						</div>
					</div>

				</form>

			</div>
		</div>

	</div>

</body>

<script>
	//获取选择的ID
	function getChoiceId() {
		var choiceId = -1;
		$("input[name=choice]").each(function(i, e) {
			if (this.checked) {
				choiceId = this.value;
			}
		});
		return choiceId;
	}

	//修改
	function Update_() {
		var choiceId = getChoiceId();
		if (choiceId != -1) {
			alert('弹出div修改页面! 并将id写在标题上')
			$("#move")
					.html(
							choiceId
									+ '<button type="button" class="close" onclick="CloseEdit()">&times;</button>');
			//通过ajax根据id获取数据后,给对应的表单赋值后显示弹窗
			ajaxGetDate(choiceId);
			changePosition()
			$("#editPage").show("fast");
		} else {
			alert('选择一个商品再进行操作')
		}
	}

	//ajax根据id获取数据后填充到 修改表单
	function ajaxGetDate(choiceId) {
		/*
		$.get('${pageContext.request.contextPath}/user_get.do?id='+choiceId,function(u){
			setValue('uname',u.name);
			setValue('urealname',u.realname);
			setValue('cardtype',u.cardtypeid);
			setValue('idcard',u.idcard)
			setValue('country',u.country)
			setValue('phone',u.phone)
		});
		 */
		setValue('uname', 'Guddqs')
		changeSelect('cardtype', 2)
		setTextareaVal('address', 'changsha')
	}

	//根据 option value值来使对应的option选中(select下拉框的修改)
	function changeSelect(name, value) {
		$("#edit").find("select[name=" + name + "]").find("option").removeAttr(
				"selected");
		$("#edit").find("select[name=" + name + "]").find(
				"option[value=" + value + "]").attr("selected", "selected");
	}

	//ByInputName:根据input的name属性给表单赋值
	function setValue(name, value) {
		$("#edit").find("input[name=" + name + "]").val(value);
	}

	//ByTextName:根据input的name属性给表单赋值
	function setTextareaVal(name, value) {
		$("#edit").find("textarea[name=" + name + "]").text(value);
	}

	//删除
	function Del_() {
		var choiceId = getChoiceId();
		if (choiceId != -1) {
			if (confirm("确认删除吗?")) {
				alert("这里重定向地址到删除Controll,传参id为:" + choiceId);
				location.href = '${pageContext.request.contextPath}/shop_del.do?s.id='
						+ choiceId;
			}
		} else {
			alert('选择一个商品再进行操作')
		}
	}

	//点击表格 选中 单选框
	$("#sl").find("tr").click(function() {
		var choice = $(this).find("input[name=choice]").get(0);
		choice.checked = true;
	});

	//添加 编辑 表单移动事件　移动改变位置
	var isClick = false;
	var offsetX;
	var offsetY;
	$("#move").mousedown(function(e) {
		isClick = true;
		offsetX = e.offsetX;
		offsetY = e.offsetY;
	});

	//鼠标松开停止移动
	$(window).mouseup(function(e) {
		isClick = false;
	});

	//鼠标移动根据情况(isClick))移动
	$(window).mousemove(function(e) {
		if (isClick) {
			console.log("Re:" + e.offsetX + ":" + e.offsetY)
			var x = e.pageX - offsetX;
			var y = e.pageY - offsetY;
			if (x >= 0) {
				$("#editPage").css("left", x);
			}
			if (y >= 0) {
				$("#editPage").css("top", y);
			}
		}
	});

	//关闭 编辑 表单
	function CloseEdit() {
		$("#editPage").hide("fast");
	}

	//将 表单校验的错误信息 放入标题
	function addError(text) {
		$("#move").append(
				"&ensp;&ensp;<font color='red' >错误: " + text + "</font>")
	}

	//检查表单数据有效性
	function CheckInput() {
		alert('没有进行校验!')
		addError('暂无')
		return false;
	}

	//对窗口位置进行居中,对不同分辨率进行适配性调整
	function changePosition() {
		var x = ($(window).width() - $("#editPage").width()) / 2;
		var y = ($(window).height() - $("#editPage").height()) / 2;
		$("#editPage").css("top", y);
		$("#editPage").css("left", x);
	}
</script>
</html>